<template>
  <div class="footer">
    <template v-for="item in links">
      <router-link :key="item.path" :to="item.path">
        {{ item.text }}
      </router-link>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      links: [
        {
          path: '/layout/home',
          text: '首页',
          icon: '',
        },
        {
          path: '/layout/classify',
          text: '分类',
          icon: '',
        },
        {
          path: '/layout/person',
          text: '个人中心',
          icon: '',
        },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.footer {
  height: 50px;
  display: flex;
  a {
    flex: 1;
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #e93410;
    }
  }
}
</style>
